« Previous Next »

JavaScript Classes - Responsive Examples

Class Declaration

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
    
            greet() {
                return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
            }
        }
        let person1 = new Person("Anam", 30);
        console.log(person1.greet());

    </Script>
</body>
</html>

Class Inheritance

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        class Animal {
            constructor(name) {
                this.name = name;
            }
    
            speak() {
                return `${this.name} makes a noise.`;
            }
        }
        class Dog extends Animal {
            constructor(name, breed) {
                super(name);
                this.breed = breed;
            }
            speak() {
                return `${this.name} is a ${this.breed} and barks.`;
            }
        }
        let dog = new Dog("Rex", "German Shepherd");
        console.log(dog.speak());
    </Script>
</body>
</html>

Static Methods


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        class Calculator {
            static add(a, b) {
                return a + b;
            }
        }
        console.log(Calculator.add(5, 10)); // 15
    </Script>
</body>
</html>

Getters and Setters

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        class Rectangle {
            constructor(width, height) {
                this.width = width;
                this.height = height;
            }
            get area() {
                return this.width * this.height;
            }
            set dimensions({ width, height }) {
                this.width = width;
                this.height = height;
            }
        }
        let rect = new Rectangle(5, 10);
        console.log(rect.area); // 50
        rect.dimensions = { width: 7, height: 14 };
        console.log(rect.area); // 98
    </Script>
</body>
</html>

Private Fields

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        class BankAccount {
            #balance = 0;
            constructor(name) {
                this.name = name;
            }
            deposit(amount) {
                this.#balance += amount;
            }
            getBalance() {
                return this.#balance;
            }
        }
        let account = new BankAccount("John");
        account.deposit(100);
        console.log(account.getBalance()); // 100
        console.log(account.#balance); // SyntaxError: Private field 'balance' must be declared in an enclosing class

    </Script>
</body>
</html>

Class Expressions

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        let Vehicle = class {
            constructor(type) {
                this.type = type;
            }
            move() {
                return `${this.type} is moving`;
            }
        };
        let car = new Vehicle("Car");
        console.log(car.move()); // Car is moving
    </Script>
</body>
</html>

« Previous Next »